<template>
  <div class="">
    <div class="">
      <div class="common_title pad_b20">系统配置</div>
      <el-form :model="queryParams" ref="queryForm" class="margin_t20"  label-width="90px">
        <el-row class="flex flex_w">
          <FormItem label="搜索关键词" class="" type="input" :form="queryParams" @keyenter="handleQuery" prop="keywords" clearable />
          <div class="search_btns pad_l20">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
          </div>
        </el-row>
      </el-form>
      <div class="common_line"></div>
      <div class="common_button flex_ac">
        <div class="right_button margin_a flex">
          <a href="javascript:;" class="color_blue " @click="handleUpdate" v-if="have_auth('/system/set/add')"><img src="@/assets/add.png" class="btn_img">新增</a>
          <a href="javascript:;" class="color_red" @click="handleDelete('','delete','删除')" v-if="have_auth('/system/set/del')"><img src="@/assets/dele.png" class="btn_img">删除</a>
        </div>
      </div>
    </div>
    <div class="common_block_div">
      <el-table v-loading="loading" :data="list"  border >
        <el-table-column label="标题" align="left" prop="title"  width="200"  />
        <el-table-column label="标识符" align="left" prop="name"  width="220"  />
        <el-table-column label="描述" align="left" prop="description" width="200" :show-overflow-tooltip="true" />
        <el-table-column label="分组" align="left" prop="groups" width="180" />
        <el-table-column label="类型" align="center" width="120">
          <template slot-scope="scope">
            <span>
              {{types[scope.row.type]}}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="值" align="left">
          <template slot-scope="scope">
            <span v-if="scope.row.type!=6 && scope.row.type!=7">{{scope.row.value}}</span>
            <span v-if="scope.row.type==6">
              编辑器内容（点击编辑查看）
            </span>
            <span v-if="scope.row.type==7">
              <img :src="http+scope.row.value" style="height: 80px;" @click="PicturePreview({url:http+scope.row.value})" alt="">
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80px" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleUpdate(scope.row)"  v-if="have_auth('/system/set/edit')">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.limit"
        @pagination="getList"
      />
    </div>
    <!-- 添加或修改对话框 -->
    <el-dialog v-dialogDrag :close-on-click-modal="false" title="编辑" :visible.sync="open" :width="form.type==6?'1200px':'500px'" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <FormItem label="标题" class="" :span="24" type="input" disabled :form="form" prop="title" clearable />
          <FormItem label="类型" class="" :span="24" type="select" :form="form" disabled prop="type" :seleDatas="types_arr" seleKey="id" seleName="title" />
          <FormItem label="值" class="" :span="24" type="input" :form="form" prop="value" clearable v-if="form.type==1" />
          <FormItem label="值" class="" :span="24" type="textarea" :form="form" prop="value" clearable v-if="form.type==2" />
          <FormItem label="值" class="" :span="24" type="select" :form="form" prop="value" :seleDatas="form.vals" v-if="form.type==5" seleKey="id" seleName="title" />

        </el-row>
        <el-row v-if="form.type==3">
          <el-form-item label="值">
             <el-radio-group v-model="form.value">
             	<el-radio :label="item.id" v-for="(item,index) in form.vals" :key="index">{{item.title}}</el-radio>
             </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row v-if="form.type==4">
          <el-form-item label="值">
             <el-checkbox-group v-model="form.value">
                 <el-checkbox style="width: 100%; margin-bottom: 10px;" :label="item.id" v-for="(item,index) in form.vals" :key="index">{{item.title}}</el-checkbox>
             </el-checkbox-group>
          </el-form-item>
        </el-row>

        <el-row v-if="form.type==7">
          <el-form-item label="值" prop="value">
            <SigleUpload :img="form.value?(form.value):''" accept="image/*" type="picture-card" formkey="value" form="form" @PicturePreview="PicturePreview" @handleUploadSuccess="handleUploadSuccess" @handleUploadRemove="handleUploadRemove"></SigleUpload>
          </el-form-item>
        </el-row>
        <el-row v-if="form.type==6">
          <el-form-item label="值"  prop="content">
             <editor v-model="form.value" :min-height="192"/>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open=false;">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')" :loading="is_ajax">{{is_ajax?'保存中···':'确定'}}</el-button>
      </div>
    </el-dialog>


   <!-- 上传图片预览 -->
   <el-dialog  :close-on-click-modal="false" append-to-body @closed="uploadImageUrl=''" width="600px" :visible.sync="uploadImgVisible">
     <img style="width: 100%;" :src="uploadImageUrl" alt="">
   </el-dialog>
  </div>
</template>

<script>
import $ from "jquery";
// 上传组件
import SigleUpload from "@/components/UploadImage/sigleUpload";
import Editor from '@/components/Editor';
export default {
  name: 'needCache',
  components: {SigleUpload,Editor},
  data () {
    return {
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      activeName:'1',  // 1进行中 2 已结束
      loading: true,
      total: 0,
      // 定时任务表格数据
      list: [],
      // 查询参数
      queryParams: {
        page: 1,
        limit: 16
      },
      openOptions: [],
      open:false,
      queryParams2:{},
      // 上传图片
      uploadImageUrl: '',
      uploadImgVisible: false,
      types:{
        1:'文本框',
        2:'文本域',
        3:'单选框',
        4:'复选框',
        5:'下拉框',
        6:'编辑器',
        7:'图片'
      },
      types_arr:[{id:'1',title:'文本框'},{id:'2',title:'文本域'},{id:'3',title:'单选框'},{id:'4',title:'复选框'},{id:'5',title:'下拉框'},{id:'6',title:'编辑器'},{id:'7',title:'图片'}],
      open:false,
      // 表单参数
      form: {is_hid:0,idcard_image:''},
      // 表单校验
      rules: {
        value: [
          { required: true, message: "值不能为空", trigger: "blur" }
        ]
      },
      is_ajax:false,
      // 上传图片
      uploadImageUrl: '',
      uploadImgVisible: false,
      is_download:false,
      http:this.http
    }
  },
  activated() {
    this.getList();
  },
  methods:{
    // 表单重置
    reset() {
      this.form = {is_hid:0,idcard_image:''};
      if(this.$refs['form']){
        this.$refs['form'].clearValidate();
      }
    },
    /** 提交按钮 */
    submitForm: function(form) {
      const _this=this;
      this.$refs[form].validate(valid => {
        if (valid) {
          this.is_ajax=true;
          let _data={..._this[form]};
          let url="/api/sys.Config/index";
          if(_this.form.type==6){
            _data.value=this.remove_upload_http(_data.value)
          }
          if(_this.form.type==4){
            _data.value=_data.value.join(',')
          }
          if(_this.form.type==7){
            _data.value=_data.file_id
          }
          _this.axios.post(url, _data).then(function(data) {
            if(data){
              _this.tip_show('操作成功','success');
              _this.open=false;
              _this.getList()
            }
            _this.is_ajax=false;
          }).catch(function(error) {
            _this.is_ajax=false
            console.log(error);
          })
        }
      });
    },
    // 上传图片--s
    PicturePreview(file) {
      this.uploadImageUrl = file.url;
      this.uploadImgVisible = true;
    },
    handleUploadSuccess(res){
      console.log(res)
      this[res.form]['file_id']=res.id
      this[res.form][res.key]='/storage/'+res.url
    },
    handleUploadRemove(res){
      this[res.form][res.key]=''
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    /** 修改按钮操作 */
    handleUpdate(row){
      this.reset()
      this.form=row.id?{...row}:{};
      // this.form.idcard_image=this.form.idcard_image?('temp/'+this.form.idcard_image.split('/temp/')[1]):''
      if(this.form.type==3 || this.form.type==4 || this.form.type==5){
        let arr=this.form.options.split('\r\n');
        let vals=[];
        for(let i=0;i<arr.length;i++){
          vals.push({
            title:arr[i].split(':')[1],
            id:arr[i].split(':')[0]
          })
        }
        this.form.vals=vals
      }
      if(this.form.type==4){
        
        if(this.form.value){
          let arr=this.form.value.split(',');
          let vals=[];
          for(let i=0;i<arr.length;i++){
            vals.push(arr[i])
          }
          this.form.value=vals
        }else{
          this.form.value=[]
        }
        
      }
      if(this.form.type==6){
        this.form.value=this.add_upload_http(this.form.value);
      }
      this.open=true;
    },

    /** 查询定时任务列表 */
    getList() {
      const _this=this;
      this.loading = true;
      _this.axios.get("/api/sys.Config/index", {params:this.queryParams}).then(function(res) {
        if(res){
          _this.list = res.data;
          _this.loading = false;
          // _this.openOptions=_this.obj2arr(res.message.search.status)
        }
      }).catch(function(error) {
        console.log(error);
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams={
        page: 1,
        limit: 16
      }
      this.handleQuery();
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .title{line-height: 44px; font-size: 20px;}
</style>
